<template>
    <div class="step">
        <div style="width: 60%;height: 80%;margin: 20px auto">
            <div style="width:100%;height: 15%;background-color: #324157;border-radius: 5px"></div>
            <div style="width:100%;height: 80%;margin: auto">
                <span style="font-size: 10px;top: 10px;position:relative">你所在的班级寝室分配如下（仅显示可选寝室）</span>
                <!-- 可选寝室列表 -->
				<div style="width: 40%;height: 20%;margin: 25px auto">
                    <el-select v-model="value" @change="getSelect(value)" placeholder="请选择">
                        <el-option
                            v-for="item in selection"
                            :key="item.dormNumber"
                            :value="item.dormNumber"
                        >
						<span style="float: left">{{ item.dormNumber }}</span>
						<span
							style="
							float: right;
							color: var(--el-text-color-secondary);
							font-size: 13px;
							"
							>{{ item.region }}</span
						>
                        </el-option>
                    </el-select>
                </div>
				<!-- 已选寝室的提示 -->
                <div style="width: 100%;height: 60%;border-radius: 4px;" v-show="isShow">
					<div style="width: 50%;float:left">
						<img class="stepTip"  src="../../assets/bed/tip_ph.png"/>
					</div>
					<div style="width: 50%;float: left">
						<span style="color: #aaaaaa;float:left;border-style: solid;border-radius:10px">你已选择寝室&nbsp;&nbsp;{{this.$store.getters.getRoom}}</span>
					</div>
				</div>
				<!-- 确认选择寝室 -->
                <el-dialog
                    v-model="dialogVisible"
                    title="请确认"
                    width="30%"
                    center
                >
                    <span>确认选择寝室{{this.selected}}</span>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="confirmRoom()">确认</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import request from '../../utils/request'
import { ref } from 'vue'

export default {
	data() {
		return {
			selection: ref([]),
			value: ref(''),
			selected: '',
			region: '',
			dialogVisible: false,
			isShow: false
		}
	},
	created() {
		this.getRoom()
		if (this.$store.getters.getRoom !== '') {
			this.isShow = true
		}
	},
	methods: {
		getSelect(value) { // 确认选择寝室
			this.dialogVisible = true;
			this.selected = value;
			for (var i = 0; i < this.selection.length; i++) {
				if (this.selection[i].dormNumber === this.selected) {
					this.region = this.selection[i].region;
					break;
				}
			}
		},
		confirmRoom() { // 弹窗确认
			this.dialogVisible = false;
			this.isShow = true;
			this.$store.commit('SET_ROOM', this.selected)
			this.$store.commit('SET_REGION', this.region)
		},
		getRoom() { // 获取可选寝室
			request({
				method: 'get',
				url: '/api/dorm/selectDormNumber',
				headers: {'jwtToken': this.$store.getters.getToken}
			}).then(res => {
				this.selection = res.data;
			})
		}
	},
}
</script>

<style lang="less" scoped>
.step {
    width: 100%;
    height: 100%;
    margin: auto;
}

.stepTip {
	width: 50%;
	height: 70%;
	margin-top: 20px;
	margin-left: 50%;
}
</style>
